<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title> Hello World </title>
    <style>
        h1{
            transition:All 0.6s ease-in-out;
            -webkit-transition:All 0.6s ease-in-out;
            -moz-transition:All 0.6s ease-in-out;
            -o-transition:All 0.6s ease-in-out;
            display:block;
            margin:50px auto;
            color:rgba(255,255,255,.8);
            text-align:center;
            font-size:22px;
            font-weight:bold;
        }
        h1:hover {
            transform:rotate(360deg);
            -webkit-transform:rotate(360deg);
            -moz-transform:rotate(360deg);
            -o-transform:rotate(360deg);
            -ms-transform:rotate(360deg);
        }
        h4{
            display:block;
            margin:20px auto;
            color:rgba(255,255,255,.8);
            text-align:center;
        }
        body{
            background-color: #000;
        }
        .ball-box{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin:-120px 0 0 -120px;
            perspective-origin: 1% 1%;
            perspective: 3000px;
        }
        @-webkit-keyframes rotate3d{
            0%{transform:rotateZ(-30deg) rotateY(0);}
            100%{transform:rotateZ(-30deg) rotateY(360deg);}
        }
        .ball{
            height: 100%;
            transform-style:preserve-3d;
            -webkit-animation:rotate3d 30s infinite linear;
            /*transform:rotateZ(-30deg) rotateY(0deg);*/
        }
        .ball:after{
            content: '';
            /**width: 1px; **/
            height: 360px;
            background-color: #ff0;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            transform:translateX(150px) translateY(-20px);
        }
        .ball > div{
            border: 3px #fff solid;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }
        /* 各线框平均角度计算：360deg/2/5deg */
        .ball .line-1{transform: rotateY(0deg);}
        .ball .line-2{transform: rotateY(36deg);}
        .ball .line-3{transform: rotateY(72deg);}
        .ball .line-4{transform: rotateY(108deg);}
        .ball .line-5{transform: rotateY(144deg);}
        .ball .line-X-1{
            transform: rotateX(90deg) ;
            border: 3px #fff solid;
        }

        .className{
            -webkit-animation: twinkling 2.2s infinite ease-in-out
        }
        .animated{
            -webkit-animation-duration:2.2s;
            animation-duration: 2.2s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
        }
        @-webkit-keyframes twinkling{
            0%{
                opacity: 0.5;
            }
            100%{
                opacity: 1;
            }
        }
        @keyframes twinkling{
            0%{
                opacity: 0.5;
            }
            100%{
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<h1 >Hello World</h1>
<div class="ball-box">
    <div class="ball">
        <div class="line-1 "></div>
        <div class="line-2 "></div>
        <div class="line-3 "></div>
        <div class="line-4 "></div>
        <div class="line-5 "></div>
        <%--<div class="line-X-1 "></div>--%>
    </div>
</div>
<h4 class="className animated" id="tm_ymdhi" ></h4>
</body>
<script>

    window.onload = function (){
        document.getElementById("tm_ymdhi").innerHTML = CurentTime();
    };
    function CurentTime() {
        var now = new Date();
        var year = now.getFullYear();       //年
        var month = now.getMonth() + 1;     //月
        var day = now.getDate();            //日
        var hh = now.getHours();            //时
        var mm = now.getMinutes();          //分
        var clock = year + "-";
        if(month < 10)
            clock += "0";
        clock += month + "-";
        if(day < 10)
            clock += "0";
        clock += day + " ";
        if(hh < 10)
            clock += "0";
        clock += hh + ":";
        if (mm < 10) clock += '0';
        clock += mm;
        return(clock);
    }
</script>
</html>